<template>
    <div class="wrapper">
        <h1>操作记录</h1>
        <div style="margin: 10px 2px;">
            <el-button type="warning"  @click="clearFilter" >重置筛选</el-button>
            <el-input
                v-model="params.orderNumber"
                placeholder="请输入订单号"
                clearable
                style="width: 300px;margin-left: 20px;"
            >
                <template #append>
                    <el-button :icon="search" @click="getTableData"></el-button>
                </template>
            </el-input>
        </div>
        <el-table 
        ref="tableRef"
        :data="tableData.records" 
        stripe border highlight-current-row
        @sort-change="handleSortChange"
        @filter-change="filterHandler"
        :default-sort="{ prop: 'operationTime', order: 'descending' }">
		    <el-table-column prop="orderNumber" label="订单号" width="220" />
            <el-table-column prop="operationType" label="操作类型 " width="100"
            :filters="[
                { text: '充值', value: '充值' },
                { text: '转账', value: '转账' },
                { text: '商品支付',value: '商品支付'},
                { text: '交物业费',value: '交物业费'},
                { text: '登录用户端',value: '登录用户端'}
            ]"
            column-key="operationType">
                <template #default="scope">
                    <div class="tablecenter">
                        <el-tag type="warning" v-if="scope.row.operationType === '充值'">充值</el-tag>
                        <el-tag type="info" v-if="scope.row.operationType === '转账'">转账</el-tag>
						<el-tag type="danger" v-if="scope.row.operationType === '商品支付'">商品支付</el-tag>
						<el-tag type="success" v-if="scope.row.operationType === '交物业费'">交物业费</el-tag>
						<el-tag type="primary" v-if="scope.row.operationType === '登录用户端'">登录用户端</el-tag>
						<el-tag type="success" v-if="scope.row.operationType === '充值水费'">充值水费</el-tag>
						<el-tag type="success" v-if="scope.row.operationType === '充值电费'">充值电费</el-tag>
						<el-tag type="success" v-if="scope.row.operationType === '充值燃气费'">充值燃气费</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="content" label="操作内容" width="500"/>
            <el-table-column prop="amount" label="操作金额" width="90">
                <template #default="scope">   
                    <div class="tablecenter">
                        <span>{{scope.row.amount}}元</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="result" label="操作结果 " width="100"
            :filters="[
                { text: '已完成', value: '已完成' },
                { text: '失败', value: '失败' }
            ]"
            column-key="result">
                <template #default="scope">
                    <div class="tablecenter">
                        <el-tag type="success" v-if="scope.row.result === '已完成'">已完成</el-tag>
                        <el-tag type="danger" v-else>失败</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" sortable label="操作时间" />
		</el-table>
        <el-pagination
        style="margin-top: 10px;"
        background
        :page-count="tableData.pages"
        v-model:current-page="params.page"
        :total="tableData.total"
        :close-on-click-modal="false"
        @current-change="getTableData"></el-pagination>
    </div>
</template>

<script setup>
import search from '@/components/icons/user/search'
import { reactive, ref } from 'vue'
import { post } from '@/plugins/axios'
import { getCookieForObject } from '@/util';

const user = getCookieForObject('user').id
const tableRef = ref(null)
const params = reactive({
    page: 1,
    limit: 9,
    filters: {},
    sort: { prop: 'createTime', order: 'descending' },
    orderNumber: ''
})
const tableData = reactive({
    records: [],
    pages: 0,
    total: 0
})

getTableData()

function getTableData() {
    post("/log/list", { userId: user, PageNo: params.page, PageSize: params.limit, filtersJson: JSON.stringify(params.filters), sortJson: JSON.stringify(params.sort),orderNumber: params.orderNumber }, res => {
        tableData.records = res.records
        tableData.pages = res.pages
        tableData.total = res.total
    })
}

const clearFilter = () => {
    tableRef.value.clearFilter()
    params.filters = {}
    getTableData()
}

const filterHandler = (column) => {
    for(let value in column){
        params.filters[value] = column[value]
    }
    getTableData()
}

const handleSortChange = ({ prop, order }) => {
    params.sort = { prop, order }
    getTableData()
}
</script>

<style lang="scss" scoped>
.wrapper{
    height: 576px;
    background-color: #fff5e9;
    border-radius: 8px;
    padding:10px 20px;
    position: relative;
    h1{
        padding: 10px 10px;
    }
    .el-table{
        background-color: #faf7f4;
        --el-table-header-bg-color: #fcd7ae;
      border-radius: 8px;
        .tablecenter{
            text-align: center;
        }
    }
    .el-pagination{
        position: absolute;
        bottom: 10px;
    }
}
</style>